<template>
  <div class="about-container">
    <el-card class="about-card">
      <template #header>
        <div class="card-header">
          <h2>关于我们</h2>
        </div>
      </template>

      <!-- 公司简介 -->
      <div class="about-section">
        <h3>公司简介</h3>
        <div class="company-intro">
          <div class="company-logo">
            <img src="../assets/logo.png" alt="公司logo" />
          </div>
          <div class="company-text">
            <p>光乐购成立于2020年，是一家专注于优质商品销售的综合电子商务平台。我们致力于为消费者提供高品质、高性价比的商品和优质的购物体验。</p>
            <p>经过多年发展，我们已经成为行业内具有一定影响力的电商平台，拥有数百万忠实用户和数千家优质合作商家。我们的产品覆盖数码电子、家居生活、服饰美妆、食品健康等多个领域。</p>
          </div>
        </div>
      </div>

      <!-- 发展历程 -->
      <div class="about-section">
        <h3>发展历程</h3>
        <el-timeline>
          <el-timeline-item timestamp="2020年1月" placement="top">
            <el-card>
              <h4>公司成立</h4>
              <p>光乐购正式成立，开始筹备电商业务</p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2020年6月" placement="top">
            <el-card>
              <h4>平台上线</h4>
              <p>电商平台正式上线运营，初期主要经营数码产品</p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2021年3月" placement="top">
            <el-card>
              <h4>业务扩展</h4>
              <p>业务范围扩展至家居生活、服饰美妆等领域</p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2022年5月" placement="top">
            <el-card>
              <h4>完成A轮融资</h4>
              <p>获得5000万元A轮融资，加速业务发展</p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2023年8月" placement="top">
            <el-card>
              <h4>用户突破500万</h4>
              <p>平台注册用户突破500万，月活跃用户超过100万</p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2024年" placement="top">
            <el-card>
              <h4>持续发展</h4>
              <p>不断优化用户体验，提升服务质量，致力于成为行业领先的电商平台</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>

      <!-- 企业文化 -->
      <div class="about-section">
        <h3>企业文化</h3>
        <el-row :gutter="20" class="culture-row">
          <el-col :span="8">
            <el-card class="culture-card">
              <template #header>
                <div class="culture-header">
                  <el-icon size="24">
                    <Star />
                  </el-icon>
                  <h4>企业愿景</h4>
                </div>
              </template>
              <p>成为最受消费者信赖的电商平台</p>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="culture-card">
              <template #header>
                <div class="culture-header">
                  <el-icon size="24">
                    <Aim />
                  </el-icon>
                  <h4>企业使命</h4>
                </div>
              </template>
              <p>让每个人都能便捷地获得优质商品和服务</p>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="culture-card">
              <template #header>
                <div class="culture-header">
                  <el-icon size="24">
                    <Medal />
                  </el-icon>
                  <h4>核心价值观</h4>
                </div>
              </template>
              <p>诚信、创新、品质、共赢</p>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 团队介绍 -->
      <div class="about-section">
        <h3>管理团队</h3>
        <el-row :gutter="20" class="team-row">
          <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(member, index) in teamMembers" :key="index">
            <el-card class="team-card">
              <div class="team-avatar">
                <el-avatar :size="80" :src="member.avatar"></el-avatar>
              </div>
              <div class="team-info">
                <h4>{{ member.name }}</h4>
                <p class="team-title">{{ member.title }}</p>
                <p class="team-desc">{{ member.description }}</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 联系我们 -->
      <div class="about-section">
        <h3>联系我们</h3>
        <el-row :gutter="20" class="contact-row">
          <el-col :span="12">
            <div class="contact-info">
              <p><el-icon>
                  <Location />
                </el-icon> <strong>公司地址：</strong>北京市朝阳区科技园区88号智慧大厦15层</p>
              <p><el-icon>
                  <Phone />
                </el-icon> <strong>联系电话：</strong>400-123-4567</p>
              <p><el-icon>
                  <Message />
                </el-icon> <strong>电子邮箱：</strong>contact@example.com</p>
              <p><el-icon>
                  <Opportunity />
                </el-icon> <strong>商务合作：</strong>business@example.com</p>
              <p><el-icon>
                  <Service />
                </el-icon> <strong>客户服务：</strong>service@example.com</p>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="map-container">
              <!-- 这里可以放置地图组件，暂时用图片代替 -->
              <img src="https://img.alicdn.com/imgextra/i1/O1CN01ky3Tvb1OWj0Hg8qKH_!!6000000001721-0-tps-1920-500.jpg"
                alt="公司地图" class="map-image" />
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Star, Aim, Medal, Location, Phone, Message, Opportunity, Service } from '@element-plus/icons-vue'

// 管理团队数据
const teamMembers = ref([
  {
    name: '张三',
    title: '创始人 & CEO',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    description: '拥有10年互联网行业经验，曾任某知名电商平台技术总监'
  },
  {
    name: '李四',
    title: '联合创始人 & COO',
    avatar: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
    description: '曾任某500强企业运营总监，拥有丰富的供应链管理经验'
  },
  {
    name: '王五',
    title: 'CTO',
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    description: '技术专家，曾主导多个大型电商平台的架构设计和开发'
  },
  {
    name: '赵六',
    title: 'CMO',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    description: '拥有丰富的市场营销经验，专注于品牌建设和用户增长'
  }
])
</script>

<style scoped>
.about-container {
  padding: 20px;
}

.about-card {
  margin-bottom: 30px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

.about-section {
  margin-bottom: 40px;
}

.about-section h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.company-intro {
  display: flex;
  gap: 30px;
  align-items: center;
}

.company-logo {
  flex-shrink: 0;
  width: 150px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.company-logo img {
  max-width: 100%;
  max-height: 100%;
}

.company-text p {
  color: #606266;
  line-height: 1.8;
  margin-bottom: 15px;
}

.culture-row,
.team-row,
.contact-row {
  margin-top: 20px;
}

.culture-card {
  height: 100%;
}

.culture-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.culture-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.culture-card p {
  color: #606266;
  line-height: 1.6;
}

.team-card {
  margin-bottom: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.team-avatar {
  margin-bottom: 15px;
}

.team-info {
  text-align: center;
}

.team-info h4 {
  margin: 0 0 5px;
  font-size: 16px;
  font-weight: 600;
}

.team-title {
  color: #409EFF;
  font-size: 14px;
  margin-bottom: 10px;
}

.team-desc {
  color: #606266;
  font-size: 12px;
  line-height: 1.6;
}

.contact-info {
  line-height: 2;
}

.contact-info p {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #606266;
}

.map-container {
  height: 250px;
  border-radius: 8px;
  overflow: hidden;
}

.map-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .company-intro {
    flex-direction: column;
    text-align: center;
  }

  .company-logo {
    margin: 0 auto 20px;
  }

  .contact-row>.el-col {
    width: 100%;
    margin-bottom: 20px;
  }
}

/* 深色模式适配 */
html.dark .company-text p,
html.dark .culture-card p,
html.dark .team-desc,
html.dark .contact-info p {
  color: #e5eaf3;
}

html.dark .about-section h3 {
  border-bottom-color: #363637;
}
</style>